<template>
  <div>
     <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片区域 -->
    <el-card>
         <el-row>
           <el-col>
             <el-button type="primary" @click="addDilogVisible=true">添加角色</el-button>
           </el-col>
         </el-row>
       <!--角色列表区域 -->
       <el-table :data='roleList' border stripe >
        <el-table-column type="expand">
          
        </el-table-column>
         <el-table-column type="index" label="序号"></el-table-column>
         <el-table-column label="角色" prop="roleName"></el-table-column>
          <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
             
                  <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)">编辑</el-button>
                 <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeRolesByid(scope.row.id)">删除</el-button>
                 <el-button type="warning" icon="el-icon-setting" size="mini">分配权限</el-button> 
            </div>
            
          </template>
        </el-table-column>
       </el-table>
    </el-card>
          <!--添加用户对话框-->
        <el-dialog
        title="添加角色"
        :visible.sync="addDilogVisible"
        width="50%">
           <!--内容主题曲-->
       <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px" @close="addDialogclose">
            <el-form-item label="角色名" prop="username">
                <el-input v-model="addForm.roleName"></el-input>
            </el-form-item>
              <el-form-item label="角色描述" prop="usercontent">
                <el-input v-model="addForm.roleDesc"></el-input>
            </el-form-item>
       </el-form>   
        <span slot="footer" class="dialog-footer">
            <el-button @click="addDilogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addRoles">确 定</el-button>
        </span>
        </el-dialog>
         <!--修改角色对话框-->
        <el-dialog
            title="修改角色"
            :visible.sync="editDialogVisible"
            width="50%"
       >
           <el-form :model="editForm"  ref="editFormRef" label-width="70px">
                <el-form-item label="角色名称" >
                    <el-input v-model="editForm.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="name">
                    <el-input v-model="editForm.roleDesc"></el-input>
                </el-form-item>
           </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editRoleInfo">确 定</el-button>
            </span>
</el-dialog>
  </div>
</template>

<script>
export default {
  data() {

      return {
        //  角色列表数据
        roleList:[],
        // 控制添加对话框现实影藏
       addDilogVisible:false,
        // 控制修改对话框现实影藏
       editDialogVisible:false,
      //查询到的信息用户对象 
       editForm:{},
      // 添加角色的表单数据
       addForm:{
           roleName:'',
           roleDesc:''
       },
      //添加表单的验证规则对象
        addFormRules:{
         username:[
             {message:'请输入角色名称'},
          ],
         usercontent:[
            {message:'请输入角色名称',trigger:'blur'},
          ],
        },
      }
  },
  created() {
      this.getRolesList()
  },
  methods: {
    //   获取所有角色的列表
  async  getRolesList(){
    const {data:res} =await this.$http.get('roles')
    if(res.meta.status!==200){
        return this.$message.error('获取角色失败')
    }
    this.roleList=res.data
    // console.log(  this.roleList);
 },
// 监听对话框关闭
 addDialogclose(){
   this.$refs.addFormRef.resetFields()
 },
//  点击按钮 添加角色
 addRoles(){                                         
   this.$refs.addFormRef.validate(async valid=>{
            if(!valid)  return
            // 可以发起添加用户的网络请求
      const {data:res} =  await this.$http.post('roles',this.addForm)
      if(res.meta.status !==201){
        this.$message.error('添加用户失败')
      }
      this.$message.success('添加用户成功')
      // 隐藏添加用户的对话框
      this.addDilogVisible=false
      // 重新获取用户列表
      this.getRolesList()
         })
 },
//  删除
async removeRolesByid(id){
       // 弹框 问下有没有是否删除
  const confirmResult= await this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>{
          return err
        })
     if(confirmResult!=='confirm'){
        return this.$message.info('已取消删除')
    }
      const{ data : res} = await this.$http.delete('roles/'+id)
      console.log(res);
      if(res.meta.status !==200){
          return this.$message.error('删除角色失败')
       } 
        this.$message.success('删除角色成功！')
         this.getRolesList()
},
// 编辑
async showEditDialog(id){
  const{data:res}= await this.$http.get('roles/'+id)
   if(res.meta.status !==200){
          return this.$message.error('更新角色信息失败')
       } 
       this.editForm=res.data
       
 this.editDialogVisible=true
},
// 修改角色信息提交
editRoleInfo(){
  this.$refs.editFormRef.validate(async valid=>{
     
      this.editDialogVisible = false
   const{ data : res } = await this.$http.put('roles/'+this.editForm.roleId,
            {
                    roleName:this.editForm.roleName,
                    roleDesc:this.editForm.roleDesc
            }
        )
        if(res.meta.status !==200){
          return this.$message.error('更新角色户信息失败')
       } 
  })
   
       //  隐藏对话框
      this.editDialogVisible=false
      // 刷新数据列表
      this.getRolesList()
      // 提示修改成功
      this.$message.success('更新角色户信息成功！')
}

  },
}
</script>

<style>

</style>